<template>
	<view class="content1">
		<!-- <view class="to_index" @tap="toIndex">去首页</view> -->
		<view class="search">
			<view style="width: 96%;margin: 0 auto;display: flex;align-items: center;">
				<input class="search_input" type="text" v-model="buildingName" value="" placeholder="你想住哪" />
				<text class="search_text" @tap="searchBtn">搜索</text>
			</view>
		</view>
		<view class="hsort">
			<view class="hsort_inner">
				<text class="hsort_inner_text">租金</text>
				<image class="hsort_inner_icon" v-if="topPrice" @click="topToLow" src="../../static/img/jiantou1.png" mode=""></image>
				<image class="hsort_inner_icon" v-if="!topPrice" @click="topToLow1" src="../../static/img/jiantou2.png" mode=""></image>
			</view>
			<view class="hsort_inner">
				<picker @change="bindPickerChange" :value="index" :range="orderArray">
					<view style="display: flex;align-items: center;">
						<view class="uni-input">{{orderArray[index]}}</view>
						<image class="hsort_inner_icon" src="../../static/img/jiantou1.png" mode=""></image>
					</view>
				</picker>
				
			</view>
			<view class="hsort_inner" @tap="open('select')">
				<text class="hsort_inner_text">筛选</text>
				<image class="hsort_inner_icon" src="../../static/img/jiantou1.png" mode=""></image>
			</view>
		</view>
		<view style="width: 100%;margin-top: 150rpx;">
			<view class="hlist" v-for="(house,index) in houseList" @click="toDetail" :data-id="house.id" key="index" v-if="house.state == 6">
				<view class="hlist_img">
					<image class="hlist_img_inner" v-if="house.img" :src="house.img.split(',')[0]" mode=""></image>
					<view class="hlist_img_inner1"></view>
				</view>
				<view class="hlist_right">
					<view class="hlist_title">
					 <view class="q_top" v-if="String(house.stick) === '0'">置顶</view>
					 <text v-if="house.typeId == 1">住宅</text>
					 <text v-if="house.typeId == 2">店铺</text>
					 <text v-if="house.typeId == 3">厂房</text>
					 <text v-if="house.typeId == 4">仓库</text>
					 <text v-if="house.typeId == 1">-{{house.addCopIdName}}</text>
					 -{{house.buildingName}}</view>
					<view class="hlist_title" style="margin-top: 5rpx;">{{house.area}}㎡
						<text v-if="house.typeId == 1 && house.shiCount && house.tingCount && house.wei">|{{house.shiCount}}室{{house.tingCount}}厅{{house.wei}}卫</text>
					</view>
					<view class="hlist_position">{{house.address}}</view>
					<view class="hlist_tag">
						<view class="hlist_tag_inner" v-for="(item,index) in house.highLightArr" :key="index">{{item}}</view>
					</view>
					<!-- <view class="hlist_price">￥{{house.unitPrice}}/月</view> -->
					<view class="hlist_position">发布时间：{{house.addTime}}</view>
					<view class="hlist_price" v-if="house.unitPrice">￥{{house.unitPrice}}/月</view>
					<view class="hlist_price" v-else>价格:面谈</view>
				</view>
			</view> 
			<view v-if="loading" style="text-align: center;">...</view>
			<view class="no_data" v-if="nodata">已经到底了...</view>
		</view>
		<!-- 筛选弹框 -->
		<view v-if="modalName=='select'" class="diolag" @tap="modalName = ''">
			<view class="diolag_inner" @tap.stop="modalName = 'select'">
				<!-- <view class="diolag_title">筛选</view> -->
				<view class="select_box">
					<view class="select_title">房屋类型</view>
					<view class="select_tag">
						<view class="tags" v-for="(item,index) in typeList" :class="{selected_color: selectedType === index && resetFlag1 == false}" :key="index" @tap.stop="selectedType = index;resetFlag1=false">{{item.typeName}}</view>
					</view>
				</view>
				<view class="select_box">
					<view class="select_title">出租方式</view>
					<view class="select_tag" >
						<view class="tags" v-for="(item,index) in tagList1" :class="{selected_color: tagIndex1 === index && resetFlag2 == false}" :key="index" @tap.stop="tagIndex1 = index;resetFlag2=false">{{item.dictLabel}}</view>
					</view>
				</view>
				<view class="select_box">
					<view class="select_title">户型</view>
					<view class="select_tag">
						<view class="tags" v-for="(item,index) in tagList2" :class="{selected_color: tagIndex2 === index && resetFlag3 == false}" :key="index" @tap.stop="tagIndex2 = index;resetFlag3=false">{{item}}</view>
					</view>
				</view>
				<view class="select_box">
					<view class="select_title">亮点</view>
					<view class="select_tag">
						<view class="tags" v-for="(item,index) in tagList3" :class="{selected_color: selectedTag.includes(item)}" :key="index" @tap.stop="selectTag(item)">{{item.dictLabel}}</view>
					</view>
				</view>
				<view class="padding-xl" style="display: flex;align-items: center;justify-content: center;">
					<view class="sure_btn" style="background: #ffffff;border: 1rpx solid #007AFF;color: #007AFF;" @tap.stop="resetBtn">重置</view>
					<view class="sure_btn" @tap.stop="searchSure">确认</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _self,timer = null;
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				orderArray:['全部','离我最近','最新发布'],
				index: 0,
				modalName: '',
				topPrice: true,
				houseList:[],
				bannerList: [],
				tagList1: [],
				tagIndex1: undefined,
				tagList2: ["1室","2室","3室","4室"],
				tagIndex2: undefined,
				tagList3: [],
				typeList: [],
				selectedType: undefined,
				selectedTag: [],
				highlightAll: [],
				buildingName: '',
				pageNum: 1,
				pageSize: 10,
				sortType: "",
				resetFlag1: false,
				resetFlag2: false,
				resetFlag3: false,
				nodata: false,
				longitude: '',
				latitude: '',
				loading: false,
				openFlag: false
			}
		},
		onShow() {
			this.getBanner()
			this.getSelect("bright_points")
			this.getSelect("leasing_mode")
			this.getHouseType()
		},
		onLoad: function (options) {
			uni.getLocation({
				success: res => {
					uni.setStorageSync("latitude",res.latitude)
					uni.setStorageSync("longitude",res.longitude)
				}
			})
			_self = this;
			setTimeout(function () {
			}, 1000);
			uni.startPullDownRefresh();
		},
		//页面滚动到底部的事件
		onReachBottom(){
			let that = this
			if(!that.nodata){
				if(timer != null){
				 clearTimeout(timer);
				}
				timer = setTimeout(function(){
				//加载更多数据
				 that.pageNum ++
				 that.getList();
				}, 1000);
			}
		 },
		onPullDownRefresh() {
			this.pageNum = 1
			this.nodata = false
			this.getList()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			searchBtn(){
				this.pageNum = 1
				// this.nodata = false
				this.getList()
			},
			//重置
			resetBtn(){
				this.resetFlag1 = true
				this.resetFlag2 = true
				this.resetFlag3 = true
				this.selectedType = undefined
				this.tagIndex1 = undefined
				this.tagIndex2 = undefined
				this.selectedTag = []
			},
			//获取亮点
			getSelect(type){
				let that = this;
				that.$api.request('/api/dict/data/list','',{
					dictType: type
				}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					if(type == 'bright_points'){ //亮点
						that.highlightAll = res.rows
						that.tagList3 = res.rows
					}else if(type == 'leasing_mode'){ //租赁方式
						that.tagList1 = res.rows
					}  
					this.getList()
				})
			},
			// 获取房源类型
			getHouseType(){
				let that = this;
				that.$api.request('/api/types/list','',{}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.typeList = res.rows
				})
			},	
			// 筛选确认
			searchSure(){
				this.resetFlag1 = false
				this.resetFlag2 = false
				this.resetFlag3 = false
				this.pageNum = 1
				this.getList()
				this.modalName = ''
			},
			getList(){
				let that = this;
				that.loading = true
				that.nodata = false
				// 处理亮点
				let highlights = ''
				let newArr = []
				for (let i = 0; i < that.highlightAll.length; i++) {
					for (let j = 0; j < that.selectedTag.length; j++) {
						if(that.highlightAll[i].dictLabel === that.selectedTag[j].dictLabel){
							newArr.push(that.highlightAll[i].dictCode)
						}
					}
				}
				highlights = newArr.join(",")
				let shiCount
				if(that.tagIndex2!=undefined){
					shiCount = that.tagIndex2 + 1
				}else{
					shiCount = ''
				}
				let typeId
				if(that.selectedType !=undefined){
					typeId = that.typeList[that.selectedType].id
				}else{
					typeId = ''
				}
				let addCopId
				if(that.tagIndex1!=undefined){
					addCopId = that.tagList1[that.tagIndex1].dictCode
				}else{
					addCopId = ''
				}
				let obj = {
					buildingName: that.buildingName,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
					highlights: highlights, //亮点
					shiCount: shiCount, //几室
					typeId: typeId,//房源类型
					addCopId: addCopId, //租赁方式
					sort: that.sortType,
					latitude: that.latitude,
					longitude: that.longitude
				}
				that.$api.request('/api/web/list','',obj, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.loading = false
					if(that.pageNum == 1){
						that.houseList=res.rows
					}else{
						res.rows.forEach((item,index) =>{
							that.houseList.push(item)
						})
					}
					if(res.rows.length == 0){
						that.nodata = true
					}
					that.houseList.forEach((item,index) =>{
						that.houseList[index].highLightArr = []
						if(item.highlights){
							let arr = item.highlights.split(",")
							for(let i=0;i<arr.length;i++){
								for(let j=0;j<that.highlightAll.length;j++){
									if(arr[i] == that.highlightAll[j].dictCode){
										that.houseList[index].highLightArr.push(that.highlightAll[j].dictLabel)
									}
								}
							}
						}
					})
					// 整租合租显示处理
					that.houseList.forEach((item,index) =>{
						that.houseList[index].addCopIdName = ''
						that.tagList1.forEach((arrItem,arrIndex) =>{
							if(arrItem.dictCode == item.addCopId){
								that.houseList[index].addCopIdName = arrItem.dictLabel
							}
						}) 
					})
				})
			},
			//计算两个经纬度距离
			distance(la1, lo1, la2, lo2) {
			    var lon1 = (Math.PI / 180) * la1;//开始经度
			    var lon2 = (Math.PI / 180) * la2;//结束经度
			    var lat1 = (Math.PI / 180) * lo1;//开始纬度
			    var lat2 = (Math.PI / 180) * lo2;//结束纬度
			    // 地球半径
			    var R = 6371;
			    // 两点间距离 km，如果想要米的话，结果*1000就可以了
			    var s = Math.acos(Math.sin(lat1) * Math.sin(lat2) + Math.cos(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1)) * R;
			    return s;
			},			
			// 轮播图
			getBanner(){
				let that = this;
				that.$api.request('/system/webImg/list','',{}, failres => {
					uni.showToast({
						title: failres.msg,
						icon: "none"
					});
				}).then(res => {
					that.bannerList = res.rows
				})
			},
			toList(){
				uni.navigateTo({
					url: '../houseType/houseType'
				})
			},
			toDetail(event){
				uni.navigateTo({
					url: '../houseDetail/houseDetail?id=' + event.currentTarget.dataset.id
				})
			},
			toIndex(){
				uni.switchTab({
					url: '../index/index'
				})
			},
			// 打开筛选弹框
			open(type){
				this.modalName = type
				if(type == "select"){ //筛选
					this.openFlag = true
				}else{
					this.openFlag = false
				}
			},
			hideModal(){
				this.modalName = ""
			},
			topToLow(){
				this.topPrice = false
				this.pageNum = 1
				this.sortType = "des"
				this.index = 0
				this.getList()
			},
			topToLow1(){
				this.topPrice = true
				this.pageNum = 1
				this.sortType = "asc"
				this.index = 0
				this.getList()
			},
			bindPickerChange(e){
				this.index = e.target.value
				this.pageNum = 1
				if(this.index == 1){
					this.latitude = uni.getStorageSync("latitude")
					this.longitude = uni.getStorageSync("longitude")
				}else{
					this.latitude = ''
					this.longitude = ''
					this.sortType = ''
				}
				this.getList()
			},
			// 选择亮点
			selectTag(i){
				let that = this
				if(that.selectedTag.includes(i)){
					that.selectedTag = that.selectedTag.filter(function(item) {
						return item != i
					});
				}else{
					that.selectedTag.push(i)
				}
			},
		}
	}
</script>

<style lang="scss">
	.no_data{
		font-size: 32rpx;
		color: #888888;
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 50rpx;
	}
	.diolag{
		position:fixed;
		background-color:rgba(0,0,0,0.5);
		width:100vw;
		height:100vh;
		top:0;
		left:0;
	}
	.diolag_inner{
		width:70%;
		margin:0 auto;
		position:absolute;
		top:0;
		right: 0;
		background: #ffffff;
		height: 100vh;
		overflow-y: scroll;
		padding: 20rpx;
	}
	.diolag_title{
		width: 90%;
		margin: 0 auto;
		text-align: center;
		color: #333333;
		padding: 20rpx;
		margin-bottom: 10rpx;
	}
	.select_box{
		width: 90%;
		margin: 0 auto;
		.select_title{
			font-size: 32rpx;
			color: #999999;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			text-align: left;
		}
		.select_tag{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
			.tags{
				font-size: 32rpx;
				color: #333333;
				padding: 10rpx 20rpx;
				background: #efefef;
				border-radius: 20rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
			.selected_color{
				background: #007AFF;
				color: #ffffff;
			}
		}
	}
	.sure_btn{
		width: 120rpx;
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
		background: #007AFF;
		text-align: center;
		margin: 50rpx auto 0 auto;
		border-radius: 10rpx;
	}
	.content1{
		background: #F3F6F8;
		padding-bottom: 50rpx;
		min-height: 100vh;
	}
	.to_index{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		background-color: #3388FF;
		color: #FFFFFF;
		font-size: 28rpx;
		position: fixed;
		right: 0;
		bottom: 150rpx;
		border-radius: 50%;
	}
	.search{
		width: 100%;
		margin: 0 auto;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		height: 80rpx;
		padding-top: 20rpx;
		position: absolute;
		top: 0;
		left: 0;
		background: #F3F6F8;
		.search_input{
			width: calc(100% - 150rpx);
			height: 60rpx;
			background: #E9ECEF;
			border-radius: 60rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			margin-right: 20rpx;
		}
		.search_text{
			color: #707171;
			font-size: 32rpx;
		}
	}
	.hbanner{
		width: 96%;
		height: 300rpx;
		margin: 20rpx auto;
		.swiper{
			width: 100%;
			height: 100%;
			.hbanner_img{
				width: 100%;
				height: 100%;
			}
		}
	}
	.htype{
		width: 96%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.htype_list{
			width: 25%;
			text-align: center;
			margin-bottom: 20rpx;
			.htype_list_img{
				width: 100rpx;
				height: 100rpx;
				display: block;
				margin: 0 auto;
			}
			.htype_list_text{
				color: #585A59;
				font-size: 32rpx;
				display: block;
				margin-top: 20rpx;
			}
		}
	}
	.hsort{
		width: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		top: 100rpx;
		left: 0;
		background: #F3F6F8;
		padding-bottom: 20rpx;
		.hsort_inner{
			width: 32%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.hsort_inner_text{
				color: #BFBFC0;
				font-size: 32rpx;
				display: block;
			}
			.hsort_inner_icon{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
	}
	.hlist{
		width: 96%;
		margin: 0 auto;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx 0;
		.hlist_img{
			width: 200rpx;
			height: 165rpx;
			border-radius: 10rpx;
			margin-left: 20rpx;
			overflow: hidden;
			.hlist_img_inner{
				width: 200rpx;
			}
			.hlist_img_inner1{
				width: 200rpx;
				height: 165rpx;
				background: url('../../static/img/10.jpg');
				background-size: 100% 100%;
			}
		}
		.hlist_right{
			margin-left: 20rpx;
			width: calc(100% - 230rpx);
			.q_top{
				color: #E54D42;
				font-size: 28rpx;
				background: #F0D492;
				padding: 5rpx 10rpx;
				border-radius: 5rpx;
				display: inline-block;
				margin-right: 20rpx;
			}
			.hlist_title{
				font-size: 32rpx;
				color: #333333;
				margin-top: 20rpx;
			}
			.hlist_position{
				font-size: 30rpx;
				color: #666666;
				margin-top: 10rpx;
			}
			.hlist_tag{
				width: 100%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.hlist_tag_inner{
					padding: 5rpx 20rpx;
					font-size: 28rpx;
					color: #666666;
					border-radius: 10rpx;
					margin-right: 20rpx;
					margin-top: 10rpx;
					border: 1rpx solid #999999;
				}
			}
			.hlist_price{
				font-size: 32rpx;
				color: red;
				margin-top: 20rpx;
			}
		}
	}
	
</style>
